<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>系统设置</title>
    <link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
    <link rel="stylesheet" href='/css/base.css'>
    <style>
        .layui-icon .layui-unselect.layui-colorpicker{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            border: 0;
        }
        .layui-icon .layui-unselect.layui-colorpicker .layui-colorpicker-trigger-span{
            display: none;
        }
        .effect-show{
            width: 95px;
            margin: 5px 0 0 20px;
            box-shadow: inset 5px 5px 15px #d9d9d9, inset -5px -5px 15px #fff;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="page-content" shiro:hasPermission="system.setting.info">
    <blockquote class="layui-elem-quote">系统设置</blockquote>
    <form class="layui-form" action="" lay-filter="setting">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基础配置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">网页标题</label>
            <div class="layui-input-inline">
                <input name="id" value="system-setting" class="layui-hide">
                <input name="systemLogo" class="layui-hide">
                <input type="text" name="webTitle" lay-verify="required" autocomplete="off" placeholder="请输入网页标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统名称</label>
            <div class="layui-input-inline">
                <input type="text" name="systemName" lay-verify="required" autocomplete="off" placeholder="请输入系统名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统logo</label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="upload-logo">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDoneView">
                        <hr>
                        <img src="" style="max-width: 196px">
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>菜单配置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">只展开一个目录</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="menuAccordion" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">多系统菜单模式</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="menuControl" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>tab配置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">开启多选项卡</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="muiltTab" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">是否保持页面</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="tabKeepState" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">开启选项卡记忆</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="tabSession" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">最大选项卡数量</label>
            <div class="layui-input-inline">
                <input type="number" name="tabMax" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>主题配置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">侧栏风格</label>
            <div class="layui-input-block" style="margin-left: 150px; display: flex">
                <div>
                    <input type="radio" name="themeDefaultMenu" lay-filter="theme" value="dark-theme" title="黑【dark-theme】">
                    <div class="effect-show">
                        <div style="display: flex"><span style="width: 15px;height: 12px;background: #28333E;display: block;"></span><span style="height: 12px;width: 80px;display: block;background: white;"></span></div>
                        <div style="display: flex"><span style="width: 15px;height: 50px;background: #28333E;display: block;"></span><span style="background: #f4f5f7;height: 50px;width: 80px;display: block;"></span></div>
                    </div>
                </div>
                <div>
                    <input type="radio" name="themeDefaultMenu" lay-filter="theme" value="light-theme" title="白【light-theme】">
                    <div class="effect-show">
                        <div style="display: flex"><span style="width: 15px;height: 12px;background: #FFF;display: block;"></span><span style="height: 12px;width: 80px;display: block;background: white;"></span></div>
                        <div style="display: flex"><span style="width: 15px;height: 50px;background: #FFF;display: block;"></span><span style="background: #f4f5f7;height: 50px;width: 80px;display: block;"></span></div>
                    </div>
                </div>
                <div>
                    <input type="radio" name="themeDefaultMenu" lay-filter="theme" value="red-theme" title="红【red-theme】">
                    <div class="effect-show">
                        <div style="display: flex"><span style="width: 15px;height: 12px;background: #f56c6c;display: block;"></span><span style="height: 12px;width: 80px;display: block;background: white;"></span></div>
                        <div style="display: flex"><span style="width: 15px;height: 50px;background: #f56c6c;display: block;"></span><span style="background: #f4f5f7;height: 50px;width: 80px;display: block;"></span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">主题颜色</label>
            <div class="layui-input-block" id="themeDefaultColor" style="margin-left: 150px"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">允许切换主题</label>
            <div class="layui-input-block" style="margin-left: 150px">
                <input type="checkbox" name="themeAllowCustom" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>其他配置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">系统加载动画时长</label>
            <div class="layui-input-inline">
                <input type="number" name="otherKeepLoad" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px">布局顶部主题</label>
            <div class="layui-input-block">
                <input type="checkbox" name="otherAutoHead" lay-skin="switch" lay-text="TRUE|FALSE">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>系统链接</legend>
        </fieldset>
        <div class="layui-form-item" style="margin: 0 30px 30px 30px;">
            <table id="link" lay-filter="link"></table>
            <a shiro:hasPermission="system.setting.edit" id="add-link" href="javascript:;" style="text-align: center;width: 700px;background-color: #f7f7f7;line-height: 35px;margin-top: 10px;display: block;">
                <i class="layui-icon layui-icon-addition"></i>
            </a>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 30px; margin-top: 25px;">
                <button shiro:hasPermission="system.setting.edit" type="submit" class="pear-btn pear-btn-primary" lay-submit="" lay-filter="save">立即提交</button>
            </div>
        </div>
    </form>
</div>

<div id="color-list" style="padding: 20px; display: none">
    <fieldset class="layui-elem-field">
        <legend>颜色列表</legend>
        <div class="layui-field-box">
            <div class="color-item"></div>
        </div>
    </fieldset>
</div>
<script type="text/html" id="barRight">
    <a shiro:hasPermission="system.setting.edit" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
<script type="text/javascript" >
    let cols = [
        {field: "title", title: '标题', width: 200},
        {field: "link", title: '链接'},
    ], edit = false
</script>
<script src="/plug-in/jquery/jquery-3.5.1.min.js" charset="utf-8"></script>
<script src='/plug-in/layui/layui.js' charset="utf-8"></script>
<script src='/plug-in/lay-config.js' charset="utf-8"></script>
<script type="text/javascript" shiro:hasPermission="system.setting.edit" >
    $.each(cols, (i, d) => {
        d.edit = "text"
    })
    cols.push({title: '操作', toolbar: '#barRight', width: 60, fixed: 'right', align: "center"})
    edit = true
</script>
<script type="text/javascript" shiro:hasPermission="system.setting.info" >
    let form = layui.form, table = layui.table
    let colors = []

    let linkTab = table.render({
        elem: '#link',
        skin: "line",
        width: 700,
        cols: [cols]
    });

    let a = $('<a href="javascript:;"><i class="layui-icon layui-icon-list" style="font-size: 20px; font-weight: bold"></i></a>').css({
        'height': "30px",
        'width': '40px',
        'line-height': '30px',
        'display': 'inline-block',
        'vertical-align': 'middle',
        'margin': '6px 0 0 0',
        'text-align': 'center',
        'background-color': '#eee',
        'border-radius': '5px'
    }).attr({"title": "修改颜色", "id": "set-color"}).hide()

    $.ajax({
        url: "/system/get",
        data: {id: "system-setting"},
        success: function (res) {
            if (res.data.colorJsonData){
                colors = JSON.parse(res.data.colorJsonData)
                colorForm()
            }

            linkTab.reload({
                data: JSON.parse(res.data.link)
            })

            form.val("setting", res.data)

            if (!edit)
                layui.$('form[lay-filter="setting"]').find("input").attr("disabled", "")
            form.render()
            if (res.data.systemLogo){
                $("#upload-logo").find("i").hide()
                $("#uploadDoneView").removeClass("layui-hide").find("img").attr("src", "/file/"+res.data.systemLogo)
            }
        }
    })

    function colorForm() {
        $.each(colors, function (index, data) {
            let span = $("<span></span>").css({
                "display": "block",
                "background-color": data.color,
                "height": "30px",
                "width": "40px",
                "border-radius": "5px"
            })
            $("#themeDefaultColor").append($('<input type="radio" name="themeDefaultColor">').attr({"value": data.id, "title": span[0].outerHTML}))
        })
        $("#themeDefaultColor").append(a)
    }

</script>
<script type="text/javascript" shiro:hasPermission="system.setting.edit" >
    a.show()
    $(document).on("click", "#set-color", function () {
        setColor(function () {
            layer.open({
                type: 1,
                //area: ["400px", '200px'],
                //maxmin: true,
                content: $("#color-list"),
                title: false,
                scrollbar: false,
                end: function () {
                    let colorId = form.val("setting").themeDefaultColor
                    $("#themeDefaultColor").html("")
                    colorForm()
                    form.render()
                    form.val("setting", {themeDefaultColor: colorId})
                }
            })
        })
    })

    function setColor(callback){
        $("#color-list .color-item").html("")
        $.each(colors, function (index, data) {
            $("#color-list .color-item").append(
                $("<span></span>").attr({"id": "color-"+data.id, "value": data.color}).css("margin-right", "20px")
            )
            layui.colorpicker.render({
                elem: '#color-'+data.id,
                color: data.color, //设置默认色
                done: function(color){
                    for(let i=0; i<colors.length; i++){
                        if (colors[i].id == this.elem.split("-")[1]){
                            colors[i].color = color
                        }
                    }
                }
            })
        })
        callback()
    }

    layui.use(['progress'], function() {
        let form = layui.form, layer=layui.layer, upload = layui.upload, progress = layui.progress;

        form.render()
        //拖拽上传
        upload.render({
            elem: '#upload-logo',
            url: '/file/upload', //改成您自己的上传接口
            before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            },
            done: function(res){
                layer.closeAll("loading")
                if (res.code===200){
                    $("#upload-logo").find("i").hide()
                    $("#uploadDoneView").removeClass("layui-hide").find("img").attr("src", "/file/"+res.data)
                    form.val("setting", {
                        systemLogo: res.data
                    })
                }else {
                    layer.msg("上传失败")
                }
            },
            //进度条
            progress: function(n, index, e){
                progress.progress(n + '%'); //配合系统进度条使用
                if(n === 100){
                    layer.msg('上传完毕', {icon: 1, shade: 0.01});
                }
            }
        });

        //监听提交
        form.on('submit(save)', function(data){
            data.field.menuAccordion?data.field.menuAccordion=true:data.field.menuAccordion=false
            data.field.menuControl?data.field.menuControl=true:data.field.menuControl=false
            data.field.muiltTab?data.field.muiltTab=true:data.field.muiltTab=false
            data.field.tabKeepState?data.field.tabKeepState=true:data.field.tabKeepState=false
            data.field.tabSession?data.field.tabSession=true:data.field.tabSession=false
            data.field.themeAllowCustom?data.field.themeAllowCustom=true:data.field.themeAllowCustom=false
            data.field.otherAutoHead?data.field.otherAutoHead=true:data.field.otherAutoHead=false
            data.field.colorJsonData=JSON.stringify(colors)
            data.field.link = JSON.stringify(table.cache["link"])
            layer.load()
            $.ajax({
                url: "/system/setting",
                type: "POST",
                data: data.field,
                success: function (res) {
                    layer.closeAll("loading")
                    if(res.code===200){
                        layer.msg('操作成功', {icon: 1, shade: 0.01}, function () {
                            localStorage.removeItem("theme-menu");
                            localStorage.removeItem("theme-color-context");
                            localStorage.removeItem("theme-color");
                            parent.window.location.reload()
                        })
                    }else{
                        layer.msg('操作失败', {icon: 0, shade: 0.01})
                    }
                },
                error(err){
                    layer.closeAll("loading")
                    layer.msg('请求失败', {icon: 2, shade: 0.01})
                }
            })
            return false;
        });

        $("#add-link").click(function(){
            let data = table.cache["link"]
            data.push({title: "", link: ""})
            linkTab.reload({data: data})
        })

        table.on('tool(link)', function(obj) {
            if (obj.event === 'del') {
                let data = table.cache["link"], index = 0
                $.each(data, (i, d)=>{
                    if(d.link == obj.data.link){
                        index = d.LAY_TABLE_INDEX
                    }
                })
                data.splice(index, 1)
                linkTab.reload({data: data})
            }
        });
    })
</script>
</body>
</html>